<md-dialog aria-label="" ng-cloak flex="85">
    <form name="PatientDetailsForm" ng-cloak>
        <md-toolbar>
            <div class="md-toolbar-tools">
                <h2>Patient Demographics</h2>
                <span flex></span>
                <md-button aria-label="Close" class="md-icon-button" ng-click="vm.CloseDialog(PatientDetailsForm.$dirty)">
                    <md-tooltip>Close</md-tooltip>
                    <md-icon md-font-library="material-icons">&#xE5CD;</md-icon>
                </md-button>
            </div>
        </md-toolbar>
        <md-dialog-content layout="column" layout-align="space-around stretch">
            <div layout="column" layout-gt-xs="row" layout-align="space-around stretch" layout-align-gt-xs="space-around center">
                <div flex layout-padding>
                    <md-input-container class="md-icon-float md-block md-accent inputValidation">
                        <label>First Name</label>
                        <input class="StyledTextInput" required ng-model="vm.FirstName" name="FirstName">
                        <div ng-messages="PatientDetailsForm.FirstName.$error" role="alert">
                            <div ng-message="required">Patient First Name cannot be blank</div>
                        </div>
                    </md-input-container>
                </div>
                <div flex layout-padding>
                    <md-input-container class="md-icon-float md-block md-accent inputValidation">
                        <label>Last Name</label>
                        <input class="StyledTextInput" required ng-model="vm.LastName" name="LastName">
                        <div ng-messages="PatientDetailsForm.LastName.$error" role="alert">
                            <div ng-message="required">Patient Last Name cannot be blank</div>
                        </div>
                    </md-input-container>
                </div>
            </div>
            <div layout="column" layout-gt-xs="row" layout-align="space-around stretch" layout-align-gt-xs="space-around center">
                <div flex layout-padding>
                    <md-input-container class="md-icon-float md-block md-accent inputValidation">
                        <label>Date of Birth</label>
                        <md-datepicker ng-model="vm.DOB" required name="DOB"></md-datepicker>

                        <div ng-messages="PatientDetailsForm.DOB.$error" role="alert">
                            <div ng-message-exp="['required']">
                                Patient DOB cannot be blank
                            </div>
                            <div ng-message-exp="['valid']">
                                Entered date is invalid!
                            </div>
                        </div>
                    </md-input-container>
                </div>

                <div flex layout-padding layout="row" style="min-height:45px;">
                    <md-input-container class="md-icon-float md-block md-accent inputValidation">
                        <md-radio-group layout="row">
                            <md-radio-button value="M" class="md-hue-3 md-accent"> Male </md-radio-button>
                            <md-radio-button value="F" class="md-hue-3 md-accent"> Female </md-radio-button>
                        </md-radio-group>
                    </md-input-container>
                </div>
            </div>

            <div layout="column" layout-gt-xs="row" layout-align="space-around stretch" layout-align-gt-xs="space-around center">
                <div flex layout-padding>
                    <md-input-container class="md-icon-float md-block md-accent inputValidation">
                        <label>Address</label>
                        <input class="StyledTextInput" required ng-model="vm.AddressL1" name="AddressL1">
                        <div ng-messages="PatientDetailsForm.AddressL1.$error" role="alert">
                            <div ng-message-exp="['required']">
                                Patient Address cannot be blank
                            </div>
                        </div>
                    </md-input-container>
                </div>
                <div flex layout-padding>
                    <md-input-container class="md-icon-float md-block md-accent inputValidation">
                        <label>Apt# / Bldg# / Line 2</label>
                        <input class="StyledTextInput" ng-model="vm.AddressL2" name="AddressL2">
                    </md-input-container>
                </div>
            </div>

            <div layout="column" layout-gt-xs="row" layout-align="space-around stretch" layout-align-gt-xs="space-around center">
                <div flex layout-padding>
                    <md-input-container class="md-icon-float md-block md-accent inputValidation">
                        <label>City</label>
                        <input class="StyledTextInput" required ng-model="vm.City" name="City">
                        <div ng-messages="PatientDetailsForm.City.$error" role="alert">
                            <div ng-message-exp="['required']">
                                City cannot be blank
                            </div>
                        </div>
                    </md-input-container>
                </div>
                <div flex layout-padding style="min-height:45px;">
                    <md-input-container class="md-icon-float md-block md-accent inputValidation">
                        <label>State</label>
                        
                        <md-select ng-model="vm.PatientState" required name="State">
                            <md-option ng-repeat="St in vm.StateList" value="{{St.StateName}}">
                                {{St.StateName}}
                            </md-option>
                        </md-select>
                        <div ng-messages="PatientDetailsForm.State.$error" role="alert">
                            <div ng-message-exp="['required']">
                                State cannot be blank
                            </div>
                        </div>
                    </md-input-container>
                </div>
                <div flex layout-padding>
                    <md-input-container class="md-icon-float md-block md-accent inputValidation">
                        <label>Zip Code</label>
                        <input class="StyledTextInput" required ng-model="vm.ZipCode" name="ZipCode" type="number" ng-pattern="/(^\d{5}$)|(^\d{5}-\d{4}$)/">
                        <div ng-messages="PatientDetailsForm.ZipCode.$error" role="alert">
                            <div ng-message-exp="['required']">
                                Zip Code cannot be blank
                            </div>
                            <div ng-message-exp="['pattern']">
                                Zip Code is not valid!
                            </div>
                        </div>
                    </md-input-container>
                </div>
            </div>

            <div layout="column" layout-gt-xs="row" layout-align="space-around stretch" layout-align-gt-xs="space-around center">
                <div flex layout-padding>
                    <md-input-container class="md-icon-float md-block md-accent inputValidation">
                        <label>E-mail</label>
                        <input class="StyledTextInput" ng-model="vm.Email" name="Email" type="email">
                        <div ng-messages="PatientDetailsForm.Email.$error" role="alert">
                            <div ng-message-exp="['pattern']">
                                Enter a valid email
                            </div>
                        </div>
                    </md-input-container>
                </div>
                <div flex layout-padding>
                    <md-input-container class="md-icon-float md-block md-accent inputValidation">
                        <label>Phone</label>
                        <input class="StyledTextInput" required ng-model="vm.Phone" name="Phone" type="tel">
                        <div ng-messages="PatientDetailsForm.Phone.$error" role="alert">
                            <div ng-message-exp="['required']">
                                Phone number cannot be blank
                            </div>
                        </div>
                    </md-input-container>
                </div>
            </div>          

            <div layout="column" layout-gt-xs="row" layout-align="space-around stretch" layout-align-gt-xs="space-around center">
                <div flex layout-padding>
                    <md-input-container class="md-icon-float md-block md-accent inputValidation">
                        <label>Primary Insurance Provider</label>
                        <input class="StyledTextInput" ng-model="vm.PrimaryInsruance" name="PrimaryInsruance">
                    </md-input-container>
                </div>
                <div flex layout-padding>
                    <md-input-container class="md-icon-float md-block md-accent inputValidation">
                        <label>Group#</label>
                        <input class="StyledTextInput" ng-model="vm.PrimaryGroup" name="PrimaryGroup">
                    </md-input-container>
                </div>
                <div flex layout-padding>
                    <md-input-container class="md-icon-float md-block md-accent inputValidation">
                        <label>Plan#/Member#</label>
                        <input class="StyledTextInput" ng-model="vm.PrimaryPlanNo" name="PrimaryPlanNo">
                    </md-input-container>
                </div>
            </div>

            <div layout="column" layout-gt-xs="row" layout-align="space-around stretch" layout-align-gt-xs="space-around center">
                <div flex layout-padding>
                    <md-input-container class="md-icon-float md-block md-accent inputValidation">
                        <label>Secondary Insurance Provider</label>
                        <input class="StyledTextInput" ng-model="vm.SecondaryInsruance" name="SecondaryInsruance">
                    </md-input-container>
                </div>
                <div flex layout-padding>
                    <md-input-container class="md-icon-float md-block md-accent inputValidation">
                        <label>Group#</label>
                        <input class="StyledTextInput" ng-model="vm.SecondaryGroup" name="SecondaryGroup">
                    </md-input-container>
                </div>
                <div flex layout-padding>
                    <md-input-container class="md-icon-float md-block md-accent inputValidation">
                        <label>Plan#/Member#</label>
                        <input class="StyledTextInput" ng-model="vm.SecondaryPlanNo" name="SecondaryPlanNo">
                    </md-input-container>
                </div>
            </div>

        </md-dialog-content>
        <md-dialog-actions layout="row">
            <md-button type="reset" class="md-raised md-hue-2 md-primary" ng-click="vm.CloseDialog(PatientDetailsForm.$dirty)">Cancel</md-button>
            <md-button type="reset" class="md-raised md-hue-3 md-accent" ng-click="vm.SavePatientDetails()">Save</md-button>
            <!--<md-button type="submit" class="md-raised md-hue-3 md-accent" ng-click="vm.SavePatientDetails()" ng-disabled="PatientDetailsForm.$pristine || PatientDetailsForm.$invalid">Save</md-button>-->
        </md-dialog-actions>
    </form>
</md-dialog>